<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div class="nav">操作管理 /配货操作-直达</div>
            </el-col>
        </el-row>
        <el-row>
            <div class="content">
                <div class="content-1" style="padding:0px;">
                    <div class="content-2">发货量统计</div>
                    <div class="content-3" style="padding: 19px 51px 100px 51px;">
                        <el-row :gutter="10">
                            <el-form ref="form" :model="form">
                                <el-col :span="4">
                                    <el-date-picker
                                    v-model="value1"
                                    type="date"
                                    placeholder="制票日期搜索">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="8">
                                    <el-button>搜索</el-button>
                                    <el-button>清空</el-button>
                                </el-col>
                            </el-form>
                    </el-row>
                       <el-row style="margin-top:30px;padding-bottom:30px;">
                        <el-table
                        :data="tableData"
                        stripe
                        border
                        :header-cell-style="tableHeaderColor"
                        style="width: 100%">
                            <el-table-column
                            prop="date"
                            align="center"
                            label="合同ID"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            align="center"
                            label="制票日期">
                            </el-table-column>
                             <el-table-column
                            prop="address"
                            align="center"
                            label="运单号">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="始发网点">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="收货人省">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="收货人市">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="收货人县区">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="收货人乡镇">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="货物名">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="件数">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="重量">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="体积">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="收货人姓名">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="联系方式">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="配送方式">
                            </el-table-column>
                        </el-table>
                        <div class="block" style="margin-top:15px;">
                            <el-row>
                                <el-col :span="12">
                                    <span>总制票数：23456</span>
                                    <span>总计件数：23456</span>
                                    <span>总计重量：23456</span>
                                    <span>总计体积：23456</span>
                                    <span>总计发货额：23456</span>
                                </el-col>
                                <el-col :span="12" style="text-align: right;">
                                    <el-pagination
                                    background
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="currentPage3"
                                    :page-size="100"
                                    layout="prev, pager, next, jumper"
                                    :total="1000">
                                    </el-pagination>
                                </el-col>
                            </el-row>
                        </div>
                    </el-row>
                    <el-row style="padding-top:30px;border-top:2px solid #e5e5e5;">
                        <el-col :span="24">
                            <span style="font-size:16px;color:#494949;">配送商信息</span>
                        </el-col>
                    </el-row>
                    <el-form ref="form" :model="form">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-radio-group v-model="form.resource">
                                    <el-radio label="1">直达</el-radio>
                                    <el-radio label="2">中转</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div v-if="displays">
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="配货商:">
                                        <el-select v-model="form.region" placeholder="请选择配货商">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="配货商:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="预计到达日期:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="到达省:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达市区:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达县区:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达乡镇:">
                                        
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="联系人:">
                                        打怪兽
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="联系电话:">
                                        17688814145
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="配送费用:">
                                        ¥345元
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="车型:">
                                        235.98
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="结算方式:">
                                        月结
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="活动形式:">
                                        <el-input type="textarea" style="width:70%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="!displays">
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="配货商:">
                                        <el-select v-model="form.region" placeholder="请选择配货商">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="配货商:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="预计到达日期:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="到达省:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达市区:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达县区:">
                                        
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="到达乡镇:">
                                        
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="联系人:">
                                        打怪兽
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="联系电话:">
                                        17688814145
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="配送费用:">
                                        ¥345元
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="车型:">
                                        235.98
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="结算方式:">
                                        月结
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="活动形式:">
                                        <el-input type="textarea" style="width:70%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col :span="5" style="text-align:center;">
                                <button class="button">保存配货单</button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                </div>
            </div>
        </el-row>
    </div>
</template>
<script>

export default {

    data () {

        return {
            tableData: [
                {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀'
                
                }, 
                {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀'
                }, 
                {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀'
                }, 
                {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀'
                }
            ],
            currentPage3: 5,
            form:{
                name:'',
                resource:'1',
                region:''
            },
            value1:'',
            displays: true
        }
    },

    mounted () {

        
        
    },

    methods: {
         //改变表头的颜色
        tableHeaderColor({ row, column, rowIndex, columnIndex }){
            if (rowIndex === 0) {
                return 'background-color: #F2F3F7;color: #000;font-weight: 500;'
            }
        },
        //分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    watch: {
        form: {
            handler(newName, oldName) {
                if(newName == '1'){
                    this.displays = true;
                }else{
                    this.displays = false;
                }
            },
            deep: true
        }
    },
}
</script>
<style>
.block > .el-row > .el-col > span{
    margin-left:15px;
}
</style>
